<template>
    <h1>通过 key 管理状态</h1>
    <!-- 为了给 Vue 一个提示，以便它可以跟踪每个节点的标识(v-bind)，从而重用和重新排序现有的元素，
        所有需要为每个元素对应的块提供一个唯一的 key attribute：
        根据经验，最好不要用索引,来绑定唯一的key就是为了提高性能
        key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
 -->
    <div v-for="item in items" :key="item.id">
        {{ item.name }}
    </div>

    <!-- 当使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上： -->
        <template v-for="item in items" :key="item.id" >
            <div> {{ item.name }}</div>
        </template>
</template> 
 

  
<script setup>
import { ref, reactive, computed } from "vue";
const items = reactive(
    [
        {
            name: '张三',
            age: '18',
            id: 0,
        },
        {
            name: '王五',
            age: '19',
            id: 1,
        },
    ]
)

</script>



